<template>
    <form @submit.prevent="addTodo">
        <input type="text" v-model="newTodo" placeholder="输入备忘事项" />
        <button type="submit">添加</button>
    </form>
</template>

<script>
export default {
    data() {
        return {
            newTodo: ''
        };
    },
    methods: {
        addTodo() {
            if (this.newTodo.trim() !== '') {
                this.$emit('addTodo', this.newTodo);
                this.newTodo = '';
            }
        }
    }
};
</script>

<style scoped>
form {
    margin-top: 20px;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-right: 10px;
}

form button:hover {
    background-color: #22a2a0;
}
</style>
